<script>
import IconCard from '../components/IconCard.vue'
import { getIcons } from '../util'
import useStart from '../hooks/useStart'
import { Button, CountDown } from 'vant'
import GSelect from '@/components/GSelect.vue'
import GHelp from '@/components/GHelp.vue'
import GTimer from '@/components/GTimer.vue'
import Taro from '@tarojs/taro'
import GameMixin from '@/mixins/GameMixin'
import GameButtonGroup from '@/components/GameButtonGroup.vue'
import FixedBottom from '@/components/FixedBottom'

export default {
  components: {
    GameButtonGroup,
    FixedBottom,
    GSelect,
    GHelp,
    GTimer,
    IconCard,
    [Button.name]: Button,
    [CountDown.name]: CountDown
  },
  mixins: [useStart, GameMixin],
  data() {
    return {
      level: 4,
      levelOptions: [
        { name: '入门', value: 4, time: 5000 },
        { name: '进阶', value: 6, time: 15000 },
        { name: '中级', value: 8, time: 30000 },
        { name: '高级', value: 12, time: 60000 }
      ],
      icons: [],
      matchedCount: 0,
      lastCard: null,
      ins: '游戏开始后, 会翻开卡片(持续5-60秒), 请记忆具有相同图案的卡片. 连续两次点击的卡片图案相同时为成功, 不同时为失败会重新盖起. 直到所有卡片都正确翻开后, 游戏结束.'
    }
  },
  computed: {
    className() {
      return ['card-group', 'card-group--' + this.level]
    },
    time() {
      return this.levelOptions[this.gameLevel].time
    },
    iconCount() {
      return this.icons.length
    }
  },
  watch: {
    level(val) {
      this.resetIcons(val)
    }
  },
  onLoad() {
    this.resetIcons(this.level)
  },
  methods: {
    onGameLevelChange(level) {
      this.level = this.levelOptions[level].value
    },
    resetIcons(num) {
      if (num === 12) {
        num = Math.random() < 0.5 ? 12 : 16
      }
      this.icons = getIcons(num)
    },
    startGame() {
      this.played = true
      !this.playing && this.resetIcons(this.level)
      Taro.nextTick(() => this.start(this.time))
    },
    setIconCard(card) {
      if (this.lastCard) {
        card.matched = card.icon === this.lastCard.icon
        this.lastCard.matched = card.matched
        this.lastCard = undefined
        card.matched && (this.matchedCount += 2)
        console.log(this.matchedCount)
        if (this.matchedCount === this.iconCount) {
          this.matchedCount = 0
          setTimeout(() => {
            this.setPlaying(false)
            Taro.showModal({
              content: '恭喜你获得了胜利 🎉🎉',
              showCancel: false
            })
          }, 750)
        }
      } else {
        this.lastCard = card
      }
    },
    resetMatched() {
      this.icons.forEach(item => {
        item.matched = !item.matched ? undefined : true
      })
    }
  }
}
</script>

<template>
  <div class="card-game">
    <div class="card-game__control">
      <g-select
        v-model="level"
        title="游戏难度"
        :disabled="playing"
        :options="levelOptions"
        @change="setGameLevel"
      />
      <g-timer />
      <g-help :content="ins" name="memory_card" />
    </div>

    <div :class="className">
      <div
        v-for="item in icons"
        :key="item.id"
        class="icon-card-wrap"
      >
        <IconCard
          :class="previewClass"
          :icon="item.icon"
          :matched="item.matched"
          :disabled="!playing"
          @click="setIconCard(item)"
          @reset="resetMatched"
        />
      </div>
    </div>

    <div class="card-game__footer">
      <!-- <van-button
        type="primary"
        :disabled="playing"
        @click="startGame"
      >
        开始游戏
      </van-button> -->
      <div
        v-if="preview"
        class="count-down-wrap"
      >
        <van-count-down
          ref="countDown"
          millisecond
          :time="time"
          format="ss:SSS"
        />
        <span>秒后开始</span>
      </div>
    </div>
    <FixedBottom v-if="!playing">
      <GameButtonGroup :max="levelCount" :current="gameLevel" :played="played" @replay="startGame" @pre="pre" @next="next" />
    </FixedBottom>
  </div>
</template>

<style lang="less">
.card-game {
  position: relative;
  min-height: 100vh;
  background-color: #ffd01e;

  &__control {
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;

    .icon-card {
      width: 100%;
      height: 100%;
    }

    .icon-card-wrap {
      padding: 20px;
      box-sizing: border-box;
    }

    &--4 {
      .icon-card-wrap {
        .size(355px);
      }
    }

    &--6 {
      .icon-card-wrap {
        .size(236.6666px);

        &:last-child {
          margin-right: auto;
        }
      }
    }

    &--12, &--8, &--16 {
      .icon-card-wrap {
        .size(177.5px);

        &:last-child {
          margin-right: auto;
        }
      }
    }
  }

  &__footer {
    text-align: center;
  }

  .count-down-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;

    .van-count-down {
      display: inline-block;
      width: 140px;
      white-space: nowrap;
      font-size: 40px;
      font-family: cursive;
    }
  }

  .fixed-bottom__content {
    background-color: transparent;

    .van-button--primary.van-button--plain {
      color: #196FFA;
    }
  }
}
</style>
